<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="<%=basePath %>/">
    <meta charset="UTF-8">
    <title>西藏援藏系统</title>
    <link rel="stylesheet" href="Css/public.css">
    <link rel="stylesheet" href="Css/utibetDetail.css">
    <link rel="stylesheet" href="./dialog/css/common.css"/>
    <link rel="stylesheet" href="./dialog/css/animate.min.css"/>
</head>
<body>
<!--页头-->
<header>
    <div class="content">
        <!--logo-->
        <img src="Images/logo.png" alt="" class="logo">
        <!--导航-->
        <ul class="navLink">
            <li><a href="main">首页</a></li>
            <li><a href="index/work">援藏工作</a></li>
            <li><a href="index/policy">援藏政策</a></li>
            <li><a href="index/need">援藏需求</a></li>
            <li><a href="index/process">援藏路径</a></li>
            <li><a href="index/school">援藏高校</a></li>
            <li><a href="index/adver">人员招聘</a></li>
        </ul>
        <!--登陆-->
        <c:if test="${userId == null}">
            <a href="login.html" class="login">登录</a>
        </c:if>
        <c:if test="${userId != null}">
            <a href="/index" class="login">后台</a>
        </c:if>
    </div>
</header>
<!--内容-->
<div class="box">

    <!-- 弹窗层内容 -->
    <div id="HBox">
        <form action="" method="post" onsubmit="return false;">
            <ul class="list">
                <li>
                    <strong>姓名 <font color="#ff0000">*</font></strong>
                    <div class="fl"><input type="text" id="name" name="name"  class="ipt name "/></div>
                </li>
                <li>
                    <strong>支援课程 <font color="#ff0000">*</font></strong>
                    <div class="fl"><input type="text" id="course" name="course"  class="ipt course"/></div>
                </li>
                <li>
                    <strong>所在院校<font color="#ff0000">*</font></strong>
                    <div class="fl"><input type="text" id="schoolname" name="schoolname"  class="ipt schoolname"/></div>
                </li>
                <li>
                    <strong>联系电话<font color="#ff0000">*</font></strong>
                    <div class="fl">
                        <input type="text" name="telephone" id="telephone" class="ipt telephone"/>
                    </div>
                </li>
                <li>
                    <strong>QQ<font color="#ff0000">*</font></strong>
                    <div class="fl">
                        <input type="text" name="qq" id="qq" class="ipt qq"/>
                    </div>
                </li>
                <li><input type="submit" id="submit" value="提交" class="submitBtn"/></li>
            </ul>
        </form>
    </div>
</div>
<div id="detail">
    <!--顶部面包屑-->
    <div class="crumbs content">
        <a href="index/need">援藏需求</a> <img src="Images/right.png" alt="">
        <a href="index/showNeed?${need.id }">需求详情</a>
    </div>
    <div class="detail content">
        <div class="detail-left">
            <div class="detail-left-top" style="height: 195px;">
                <h1 style="text-align: center;">${need.title }</h1>
                <section>
                    <%--						<div class="btn" style="margin: 10px auto;" onclick="openJoin()">点击报名</div>--%>
                    <div class="demo">
                        <div class="example">
                            <a href="javascript:;" style="margin: 10px auto;" class="demo0">点击报名</a>
                        </div>
                    </div>
                    <!--  <a href="index/indexadd.jsp" class="btn" style="margin: 10px auto;">点击报名</a>
            -->
                </section>
            </div>

            <div class="detail-left-bottom">
                <p>${need.info }</p>
            </div>
        </div>
        <div class="detail-right">
            <h3>相似的项目</h3>
            <ul>
                <c:forEach items="${needs }" var="n">
                    <li>
                        <h5
                                style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                            <a class="detail-left-top" style="color: #e9a515;"
                               href="index/showNeed?id=${n.id }">${n.title }</a>
                        </h5>

                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!--页脚-->
<footer>
    <div class="content">
        <div class="footer-blue">
            <img src="Images/blue.png" alt="">
        </div>
        <div class="footerContent">
            <p>
                版权所有©西藏大学 藏ICP备05000064号 <a
                    style="height: 20px; line-height: 20px; text-decoration: none;"
                    target="_blank"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=54010202000088"><img
                    src="Images/beiantubiao.png">藏公网安备54010202000088号</a>
            </p>
            <p>
                地址：西藏自治区拉萨市城关区藏大东路10号 邮政编码：850000 <img src="Images/pic1.gif" alt="">
            </p>
            <p>达内时代科技集团提供技术支持</p>
        </div>
        <div class="QrCode">
            <img src="Images/app.jpg" alt="">
        </div>
    </div>
</footer>
<script src="./dialog/js/jquery.min.js"></script>
<script src="./dialog/js/zhou.js"></script>
<script>
    // $("#submit").click(function () {
        <%--var name = $("#name").val();--%>
        <%--var course = $("#course").val();--%>
        <%--var schoolname = $("#schoolname").val();--%>
        <%--var telephone = $("#telephone").val();--%>
        <%--var qq = $("#qq").val();--%>
        <%--var demandid ='';--%>
        <%--demandid = ${need.id};--%>
        <%--var demandtitle = '${need.title}';--%>
        <%--if(name == "")--%>
        <%--var param = "name=" + name + "&course=" + course + "&schoolname=" + schoolname + "&telephone=" + telephone + "&qq=" + qq + "&demandid=" + demandid + "&demandtitle=" + demandtitle;--%>
        <%--$.ajax({--%>
        <%--    url: "/enroll/add",--%>
        <%--    type: "post",--%>
        <%--    async: true,--%>
        <%--    data: param,--%>
        <%--    success: function (res) {--%>
        <%--        if (res.success) {--%>
        <%--            alert("报名成功！")--%>
        <%--        } else {--%>
        <%--            alert(res.message);--%>
        <%--        }--%>
        <%--    }, error: function (e) {--%>
        <%--        alert(e)--%>
        <%--    }--%>
        <%--});--%>
    // });
    $(function () {
        var $el = $('.dialog');
        $el.hDialog();

        //缩放
        $('.demo0').hDialog({title: '测试弹框标题', height: 300});

        //淡出效果
        $('.demo1').hDialog({effect: 'fadeOut'});

        //返回顶部
        $.goTop();

        //提交并验证
        $('.submitBtn').click(function () {
            var EmailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则表达
            var PhoneReg = /^0{0,1}(13[0-9]|15[0-9]|153|156|18[7-9])[0-9]{8}$/; //手机正则表达
            var $name = $('.name');
            var $telephone = $('.telephone');
            if ($name.val() == '') {
                $.tooltip('姓名不能为空');
                $name.focus();
                return
            } else if ($telephone.val() == '') {
                $.tooltip('手机还没填呢...');
                $telephone.focus();
                return;
            } else if (!PhoneReg.test($telephone.val())) {
                $.tooltip('手机格式错咯...');
                $telephone.focus();
                return;
            } else {
                var name = $("#name").val();
                var course = $("#course").val();
                var schoolname = $("#schoolname").val();
                var telephone = $("#telephone").val();
                var qq = $("#qq").val();
                var demandid ='';
                demandid = ${need.id};
                var demandtitle = '${need.title}';
                var param = "name=" + name + "&course=" + course + "&schoolname=" + schoolname + "&telephone=" + telephone + "&qq=" + qq + "&demandid=" + demandid + "&demandtitle=" + demandtitle;
                $.ajax({
                    url: "/enroll/add",
                    type: "post",
                    async: true,
                    data: param,
                    success: function (res) {
                        if (res.success) {
                            alert("报名成功！")
                        } else {
                            alert(res.message);
                        }
                    }, error: function (e) {
                        alert(e)
                    }
                });
                $.tooltip('提交成功，2秒后自动关闭', 2000, true);
                setTimeout(function () {
                    $el.hDialog('close', {box: '#HBox'});
                }, 2000);
            }
        });

    });
</script>
<script type="text/javascript">
    var box = document.getElementsByClassName("box")[0];

    function openJoin() {
        box.style.transform = "rotate(360deg) scale(1)";
        box.style.opacity = "1";
    }

    function closeJoin() {
        box.style.transform = "rotate(0deg) scale(0)";
        box.style.opacity = "0";
    }

    $(function () {
        $('#backid').click(function () {
            closeJoin();
        });

        $("#submit-button").click(function () {
            var needId = ${need.id};
            var userName = $("#userName").val();
            var courseName = $('#courseName').val();
            var schId = $("#schId").val();
            var telephone = $('#telephone').val();
            var qq = $("#qq").val();

            var data = "&userName=" + userName;
            data += "&courseName=" + courseName;
            data += "&telephone=" + telephone;
            data += "&qq=" + qq;
            data += "&schName=" + schId;
            data += "&needId=" + needId;

            $.ajax({
                url: 'index/addEnterName',
                type: 'post',
                async: true,
                data: data,
                success: function (message) {
                    alert(message);
                    window.location.href = "index/need";
                },
                error: function () {
                    alert('network is error');
                }
            });
        });
    });
</script>
</body>
</html>